<template>
	<view class="btnContainer">
		<button class="btn1">点击小车开始移动</button>
		<button class="btn2">重置</button>
		<button class="btn3">暂停</button>
		<button class="btn4">恢复</button>
		<p>
			<input type="text" placeholder="请输入限制移动距离" />
			<button class="btn5">点击限制移动距离</button>
		</p>
		<view class="info">
			<p></p>
			<p>当前限制小车最大移动距离：0米</p>
			<p>当前小车行驶距离：0米</p>
			<p></p>
		</view>
	</view>
	<view id="container"></view>
</template>

<script>
	import QQMapWX from '../../common/qqmap-wx-jssdk.js'
	export default {
		data() {
			return {
				map:null
			}
		},
		
		mounted() {
			// this.qqmapsdk = new QQMapWX({
			// 	key: 'M5JBZ-XEZCJ-6SPFB-DH4E5-QFCS7-FCBTQ'
			// });
		 let plugin = requirePlugin('routePlan');
		 let key = 'M5JBZ-XEZCJ-6SPFB-DH4E5-QFCS7-FCBTQ';  //使用在腾讯位置服务申请的key
		 let referer = 'wx2f311ddb1af83a02';   //调用插件的app的名称
		 let endPoint = JSON.stringify({  //终点
		     'name': '吉野家(北京西站北口店)',
		     'latitude': 39.89631551,
		     'longitude': 116.323459711
		 });
		 let mode="driving"
		 uni.navigateTo({
		     url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint+'&navigation=1'+"&mode="+mode
		 })
		
		}

			


	}
</script>

<style>
	#container {
		width: 500px;
		height: 500px;
	}

	.btnContainer {
		position: absolute;
		left: 20px;
		top: 20px;
		z-index: 10000;
	}

	.btnContainer button {
		padding: 10px 14px;
		box-sizing: border-box;
		border: none;
		background-color: #919aac;
		border-radius: 2px;
		color: #fff;
		font-size: 14px;
		line-height: 14px;
	}

	.btnContainer button:focus {
		outline: none;
	}

	.btnContainer .btn1 {
		padding: 10px 14px;
		background: #3876ff;
		border-radius: 2px;
		border: none;
		box-sizing: border-box;
		font-size: 14px;
		color: #fff;
		line-height: 14px;
		font-family: PingFangSC-Regular;
	}

	input {
		height: 25px;
	}

	.info {
		background-color: white;
		padding: 10px;
		font-size: 14px;
	}
</style>